<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">
    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Redux</title>
</head>
<body>
<div id="react-container"></div>
  <script type="text/babel">

      const { createStore, combineReducers } = Redux

      const color = (state = {}, action) => {
          switch (action.type) {
              case "ADD_COLOR":
                  return {
                      id: action.id,
                      title: action.title,
                      color: action.color,
                      timestamp: action.timestamp,
                      rating: 0
                  }
              case "RATE_COLOR":
                  return (state.id !== action.id) ?
                      state :
                      {
                          ...state,
                          rating: action.rating
                      }
              default :
                  return state
          }
      }

      const colors = (state = [], action) => {
          switch (action.type) {
              case "ADD_COLOR" :
                  return [
                      ...state,
                      color({}, action)
                  ]
              case "RATE_COLOR" :
                  return state.map(
                      c => color(c, action)
                  )
              case "REMOVE_COLOR" :
                  return state.filter(
                      c => c.id !== action.id
                  )
              default:
                  return state
          }
      }

      const sort = (state="SORTED_BY_DATE", action) => {
          switch (action.type) {
              case "SORT_COLORS":
                  return action.sortBy
              default :
                  return state
          }
      }

      const store = createStore(
          combineReducers({ colors, sort })
      )



      const unsubscribeLogger = store.subscribe(() =>
          console.log('next state', store.getState())
      )

      store.dispatch({
          type: "ADD_COLOR",
          id: 1,
          title: "Party Pink",
          color: "#F142FF",
          timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
      })

      unsubscribeLogger()

      store.dispatch({
          type: "ADD_COLOR",
          id: 2,
          title: "Big Blue",
          color: "#0000FF",
          timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
      })

      store.dispatch({
          type: "RATE_COLOR",
          id: 1,
          rating: 5
      })

      store.dispatch({
          type: "REMOVE_COLOR",
          id: 2
      })

  </script>
</body>
</html>
